/*Tag Default Stype Definition*/
html{
	height:100%;
	width:100%;
}

body{
	margin:0px;
	padding:0px;
	height:100%;
	width:100%;
}

* {
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

.Content{
	width:100%;
	height:100%;
}

/*Component Basic Theme Definition*/
.Pannel{
	/*nothing special*/
}

.Label{
	width:auto;
	height:auto;
	font-size:large;
}

.TextField{
	width:auto;
	height:auto;
	font-size:large;
}

.TextInput{
	border:1px solid #999999;
	font-size:large;
}

.TextArea{
	border:1px solid #999999;
	font-size:large;
	width:100%;
	height:30%;
}

.Image{	
	width:200px;
	height:200px;
}

.Button{
	background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0),to(#E0E0E0), color-stop(0.5,#999999),color-stop(0.51,#666666),color-stop(0.99,#eeeeee));
	-webkit-border-radius: 5px;
	-moz-border-radius: 15px;
	width:120px;
	height:40px;
	border:1px solid #DDDDDD;
	color:white;
}

.ButtonDisable{
	background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0),to(#E0E0E0), color-stop(0.5,#999999),color-stop(0.51,#666666),color-stop(0.99,#eeeeee));
	-webkit-border-radius: 5px;
	-moz-border-radius: 15px;
}

.ButtonActive{
	background: -webkit-gradient(linear, left top, left bottom, from(#D4E9FF),to(#D4E9FF), color-stop(0.5,#BADDFF),color-stop(0.51,#70B8FF),color-stop(0.99,#D4E9FF));
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.Button .Label{
	color:#FFFFFF;
	-webkit-user-select:none; 
	-moz-user-select:none; 	
	font-size:large;
	line-height:40px;
	text-shadow:1px 1px 1px #666666;
}

.ScrollView {
	height:724px;		/* Of course you need to specify the object height */
	position:relative;	/* On older OS versions "position" and "z-index" must be defined, */
	z-index:1;			/* it seems that recent webkit is less picky and works anyway. */
	width:100%;
	overflow:hidden;
}

.List{
	margin:0px;
	padding:0px;
}

.ListRow{
	margin:0px;
	padding:0px;
	border-top:1px solid #DDDDDD;
	height:50px;
	background-color:#FFFFFF;
	visibility:none;
}

.ListRow:last-child{
	margin:0px;
	padding:0px;
	border-bottom:1px solid #DDDDDD;
	height:50px;
	background-color:#FFFFFF;
}

.ListRow:nth-child(odd){
	margin:0px;
	padding:0px;
	height:50px;
	background-color:#F9F9F9;
}

.ListColumn{
	position:relative;
	line-height:50px;
	left: 50px;
	font-size: 22px;
	font-weight: bold;
	color:#333333;
	height:50px;
	-webkit-user-select:none; 
	-moz-user-select:none; 		
}

.ToolBar{
	position:absolute;
	bottom:0;
	height:60px;
	background: -webkit-gradient(linear, left top, left bottom, from(#333333),to(#333333));
}

.ToolBarItem{
	width:100px;
	height:60px;
	background-color: transparent;
}



.ToolBarItem .Button{
	top: 25%;
	margin:10px auto;
	font-weight:bold;
	height:40px;
	width:90px;
	border:none;
}

.ToolBarItem .Button .Label{
	height:40px;
	line-height:40px;
}

.TitleBar {
	width: 100%;
	height: 38px;
	line-height: 38px;
	vertical-align: middle;
	text-align:center;
	color: white;
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(225,175,139)), to(rgb(217,152,106)), color-stop(0.05, rgb(225,175,139)), color-stop(0.45, rgb(212,141,92)), 
	color-stop(0.55, rgb(191,92,45)), color-stop(0.8, rgb(190,90,40)), color-stop(0.95, rgb(201,109,47)));
}

.TitleBar .Label {
	width: 80%;
	text-align: left;
	padding-left: 15px;
	font-size:15px;
	-webkit-user-select:none; 
	-moz-user-select:none; 		
}

.CheckBox{
	background-image:url("../image/common/checkbox_unchecked.png");
	background-repeat: no-repeat;
	background-position: center left;
	height:50px;
}

.CheckBoxActive{
	background-image:url("../image/common/checkbox_checked.png");
	background-repeat: no-repeat;
	background-position: center left;
	height:50px;
}

.CheckBox .Label{
	line-height:50px;
	margin-left:60px;
	-webkit-user-select:none; 
	-moz-user-select:none;
	font-size: 20px; 		
}

/* only for temporary */
.Checkbox{
	background-image:url("../image/common/checkbox_unchecked.png");
	background-repeat: no-repeat;
	background-position: center left;
	height:50px;
}

.Checkbox.Active{
	background-image:url("../image/common/checkbox_checked.png");
	background-repeat: no-repeat;
	background-position: center left;
	height:50px;
}

.Checkbox .Label{
	line-height:50px;
	margin-left:60px;
	-webkit-user-select:none; 
	-moz-user-select:none;
	font-size: 20px; 		
}
/* only for temporary */

.TabBar{
	height:50px;
	width:100%; 		
}

.TabBar .Toggle{
	float:left;
	position:relative;
	width:100px;
	background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0),to(#E0E0E0), color-stop(0.5,#999999),color-stop(0.51,#666666),color-stop(0.99,#eeeeee));
	border:1px solid #DDDDDD;
}

.TabBar .Toggle:first-child{
	-webkit-border-top-left-radius: 15px;
	
}

.TabBar .Toggle:last-child{
	-webkit-border-top-right-radius: 15px;
}


.TabBar .ToggleActive{
	float:left;
	position:relative;
	width:100px;
	background: -webkit-gradient(linear, left top, left bottom, from(#D4E9FF),to(#D4E9FF), color-stop(0.5,#BADDFF),color-stop(0.51,#70B8FF),color-stop(0.99,#D4E9FF));
	border:1px solid #DDDDDD;
}

.TabBar .ToggleActive:first-child{
	-webkit-border-top-left-radius: 15px;
}

.TabBar .ToggleActive:last-child{
	-webkit-border-top-right-radius: 15px;
}

.TabBar .Toggle .Label{
	line-height:50px;
	width:inherit;
	font-size:large;
	color:#EEEEEE;
	text-align: center;
	text-shadow: 1px 1px 1px #666666;
}

.TabBar .ToggleActive .Label{
	line-height:50px;
	width:inherit;
	font-size:large;
	color:#FFFFFF;
	text-align: center;
	text-shadow: 1px 1px 1px #666666;
}

.ListRowB {
	position: relative;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 90px;
	background-color: white;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #808080;
	visibility: hidden;
}

.ListRowA {
	position: relative;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 90px;
	background-color: white;
	border-bottom: 1px solid #808080;
	visibility: hidden;
}

.CustomDialogMask { 
	top:0px;
	left:0px; 
	display:block;
	height:100%;
	width:100%;
	background-color:#333333;
	opacity:0.7;
	position:absolute;
}

.ARButton {
	width: 60px;
	height: 60px;
	-webkit-background-size: 100%;
	background:url(../image/icon/mob_ar.png) no-repeat center;
}

.QRButton {
	width: 60px;
	height: 60px;
	-webkit-background-size: 100%;
	background:url(../image/icon/mob_qrcode.png) no-repeat center;
}

.FacebookButton {
	width: 60px;
	height: 60px;
	-webkit-background-size: 100%;
	background:url(../image/icon/mob_facebook.png) no-repeat center;
}

.TwitterButton {
	width: 60px;
	height: 60px;
	-webkit-background-size: 100%;
	background:url(../image/icon/mob_twitter.png) no-repeat center;
}